<!--
 * @Description: 告警信息
 * @Author: 0001100986/LiuShuai
 * @Date: 2021-06-22 14:09:49
 * @LastEditTime: 2021-10-18 10:51:29
 * @LastEditors: 0001100986/LiuShuai
-->
<template>
  <div class="card-box">
    <div class="head">
      <p class="line-title">
        <i
          class="iconfont iconxiaoxi1"
          style="color: #FF9592; background: rgba(242, 109, 91, 0.35)"
        ></i>
        <span>告警信息</span>
      </p>
    </div>
    <div class="chart-box">
      <div id="alarms"></div>
      <div v-show="alarmSum === 0" class="noval">
        <div class="noval-content">
          <i class="iconfont">&#xe707;</i>
          <p>暂无数据</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Chart } from '@antv/g2';
export default {
  data () {
    return {
      alarmSum: 0,
      alarmData: []
    };
  },
  destroyed () {
    this.$ws.unregisterDgQueueListener(this.alarmsAll);
  },
  mounted () {
    let _this = this;
    _this.$nextTick(() => {
      _this.$http.get({
        url: '/api/fm/sd/count'
      }).then(res => {
        let alarms = res;
        let arry = [];
        // eslint-disable-next-line guard-for-in
        for (let key in alarms) {
          switch (key) {
            case 'severityTotal':
              _this.alarmSum = alarms[key] ? alarms[key] : 0;
              break;
            case 'Critical':
              arry.push({ item: '严重', count: alarms[key], percent: alarms[key] });
              break;
            case 'Major':
              arry.push({ item: '主要', count: alarms[key], percent: alarms[key] });
              break;
            case 'Minor':
              arry.push({ item: '次要', count: alarms[key], percent: alarms[key] });
              break;
            case 'Warning':
              arry.push({ item: '警告', count: alarms[key], percent: alarms[key] });
              break;
          }
        }
        _this.alarmData = arry;
        _this.chartAlarm();
        _this.$ws.registerDgQueueListener('alarm.notify', _this.alarmsAll);
      });
    });
  },
  methods: {
    alarmsAll (msg) {
      let _this = this;
      let alarms = msg.payload;
      let arry = [];
      // eslint-disable-next-line guard-for-in
      for (let key in alarms) {
        switch (key) {
          case 'severityTotal':
            _this.alarmSum = alarms[key] ? alarms[key] : 0;
            break;
          case 'Critical':
            arry.push({ item: '严重', count: alarms[key], percent: alarms[key] });
            break;
          case 'Major':
            arry.push({ item: '主要', count: alarms[key], percent: alarms[key] });
            break;
          case 'Minor':
            arry.push({ item: '次要', count: alarms[key], percent: alarms[key] });
            break;
          case 'Warning':
            arry.push({ item: '警告', count: alarms[key], percent: alarms[key] });
            break;
        }
      }
      _this.alarmData = arry;
      // 销毁chart
      let box = document.getElementById('alarms');
      if (box) {
        box.innerHTML = '';
      }
      _this.chartAlarm();
    },
    chartAlarm () {
      const alarmChart = new Chart({
        container: 'alarms',
        autoFit: true,
        height: 400,
      });
      alarmChart.data(this.alarmData);
      alarmChart.scale('percent', {
        formatter: (val) => {
          val = val + '条';
          return val;
        },
      });
      alarmChart.coordinate('theta', {
        radius: 0.75,
        innerRadius: 0.6,
      });
      alarmChart.tooltip({
        showTitle: false,
        showMarkers: false,
        itemTpl: '<li class="g2-tooltip-list-item"><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}</li>'
      });
      // 辅助文本
      alarmChart.annotation().text({
        position: ['50%', '50%'],
        content: '告警',
        style: {
          fontSize: 16,
          fill: '#333',
          textAlign: 'center',
        },
        offsetY: -20,
      }).text({
        position: ['50%', '50%'],
        content: this.alarmSum,
        style: {
          fontSize: 20,
          fill: '#333',
          textAlign: 'center',
        },
        offsetX: 0,
        offsetY: 20,
      });
      alarmChart.interval().position('percent').color('item', ['#86bcdb', '#e9d426', '#de4040', '#de8f40']).label('percent', {
        content: (data) => {
          return `${data.item}: ${data.count}`;
        },
      }).adjust('stack');
      alarmChart.render();
    }
  }
};
</script>

<style lang="scss" scoped>
.chart-box {
  position: relative;
  height: 400px;
  overflow: hidden;
  .noval {
    background: #fff;
    width: 100%;
    height: 400px;
    position: relative;
    top: -400px;
    left: 0;
    .noval-content {
      position: absolute;
      top: 40%;
      left: 40%;
      text-align: center;
      i {
        color: #d7d6d6;
        font-size: 40px;
      }
      p {
        color: #999;
        font-size: 13px;
        line-height: 30px;
        margin-top: 10px;
      }
    }
  }
}
</style>
